<template>
  <div>
    <header>
      <!-- 项目树划分变更 -->
      <Row type="flex" justify="start" align="middle">
        <Col span="2"><h2>变更记录</h2></Col>
        <Col span="22"
          ><Button class="btn-color" @click="backToProjectTree" type="primary"
            >返回项目树</Button
          ></Col
        >
      </Row>
    </header>
    <!-- 变更记录查询表单 -->
    <section class="search-box">
      <template>
        <Form
          ref="formRecordSearch"
          :model="formRecordSearch"
          :label-width="60"
        >
          <FormItem label="单位工程" prop="dwname">
            <Input
              style="width:200px"
              v-model="formRecordSearch.dwname"
              placeholder="请输入单位工程名称"
            ></Input>
          </FormItem>
          <FormItem label="发起人" prop="username">
            <Input
              style="width:200px"
              v-model="formRecordSearch.username"
              placeholder="请输入发起人姓名"
            ></Input>
          </FormItem>

          <FormItem>
            <Button type="primary" @click="handleSubmit(formRecordSearch)"
              >查询</Button
            >
            <Button
              @click="resetformData('formRecordSearch')"
              style="margin-left: 8px"
              >重置</Button
            >
          </FormItem>
        </Form>
      </template>
    </section>
    <!-- 变更记录列表 -->
    <section class='list'>
      <template>
        <Table border :columns="columns" :data="dataList" stripe>
          <template slot-scope="{ row }" slot="state">
            <strong :class='`color-${row.state}`'>{{ changeStateString(row.state) }}</strong>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" @click="switchToRecordDetial(0)"
              >查看</Button
            >
            <Button
              type="info"
              size="small"
              v-show="row.state=='locked'"
              @click="switchToRecordDetial(1)"
              style="margin:0 5px"
              >编辑</Button
            >
            <!-- <Button type="error" size="small" @click="removeTable(row)"
                  >删除</Button
                > -->
          </template>
        </Table>
        <pagepart
          class="pages"
          :total="total"
          @getCurrentPage="getCurrentPage"
          @getSize="getSize"
        />
      </template>
    </section>
  </div>
</template>
<script>
import apiObj from '@/api/project-partition.js';
import pagepart from '../../../common_components/page-part';

export default {
  name: 'record-list',
  data () {
    return {
      // 搜索表单
      formRecordSearch: {
        username: '',
        dwname: ''
      },

      // 列表格式
      columns: [

        {
          title: '施工合同段',
          key: 'htdname',
          align: 'center'
        },
        {
          title: '变更说明',
          key: 'comments',
          align: 'center'
        },
        {
          title: '变更顶层节点',
          key: 'dwname',
          align: 'center'
        },
        {
          title: '发起人部门',
          key: 'deptname',
          align: 'center'
        },
        {
          title: '发起人',
          key: 'username',
          width: 90,
          align: 'center'
        },
        {
          title: '修改时间',
          key: 'updatetime',
          align: 'center'
        },
        {
          title: '生效时间',
          key: 'finishtime',
          align: 'center'
        },
        {
          title: '审批状态',
          slot: 'state',
          key: 'state',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      // 列表数据
      dataList: [],
      pages: {
        pageNum: 1,
        pageSize: 5
      },
      total: 0
    };
  },
  components: {
    pagepart
  },
  methods: {
    // 返回到项目划分页面
    backToProjectTree () {
      this.$router.go(-1);
    },
    // 获取变更列表数据
    async getRecordListTable (form) {
      form = form === undefined ? this.formRecordSearch : form;
      const send = { pageNum: this.pages.pageNum,
        pageSize: this.pages.pageSize,
        dwname: form.dwname,
        username: form.username
      };
      try {
        const resp = await apiObj.changeRecodeList(send);
        console.log('resp', resp);
        this.dataList = resp.data.data;
        this.total = resp.data.total;
      } catch (error) {}
    },
    // 列表状态值转换
    changeStateString (str) {
      if (str === 'locked') {
        return '未提交';
      } else if (str === 'normal') {
        return '已完成';
      } else {
        return '审核中';
      }
    },
    // 提交搜索表单
    handleSubmit (form) {
      console.log('form', form);
      this.getRecordListTable(form);
      //   this.switchToRecordPage();
    },
    // 表单重置按钮
    resetformData (name) {
      this.$refs[name].resetFields();
    },
    // 切换页码
    getCurrentPage (currentPage) {
      console.log('切换页妈？');
      this.pages.pageNum = currentPage;
      this.getRecordListTable();
    },
    // 切换每页条数
    getSize (pageSize) {
      this.pages.pageSize = pageSize;
      this.getRecordListTable();
    },
    // 跳转到变更日志详情页
    switchToRecordDetial (state) {
      console.log('点击提交');
      this.$router.push({
        path: 'old-tree',
        query: { 'state': state !== 0 }
      });
    }
  },
  mounted () {
    this.getRecordListTable();
  }
};
</script>
<style lang="less" scoped>
@fontSize: 20px;
@shortWH: 10px;
.search-box {
  margin-top: 2 * @shortWH;
  form {
    display: flex;
    align-items: center;
  }
  .ivu-form-item {
    margin: 0;
  }

}
.list{
    margin-top: 2 * @shortWH;
    .color-locked{
      color:gray
    }
}
.pages{
  float: right;
  margin-top: 2 * @shortWH;

}
</style>
